<template>
  <BasicTabs v-model="tabname" :tabs="tabs"  @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import GroupStatus from '../components/tabComponents/groupStatus.vue'
  import MachineDetail from '../components/tabComponents/machineDetail.vue'
  import BucketStatistics_PreDrawing from '../components/tabComponents/pre_final-drawing/bucketStatistics_Combine.vue'
  // import AbnormalAnalysis from '../components/tabComponents/abnormalAnalysis.vue'
  import BucketParking from '../components/tabComponents/pre_final-drawing/bucketParking.vue'
  import ChangeSettings from '../components/tabComponents/changeSettings.vue'
  import HistoricalTrendChart from '../components/tabComponents/historicalTrendChart/index.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '11510',
      label: '状态总览',
      roles: ['11510'],
      slots: { default: h(GroupStatus, { statusCode: '11510', processName: '末并' }) }
    },
    {
      name: '11520',
      label: '单机详情',
      roles: ['11520'],
      slots: { default: h(MachineDetail, { statusCode: '11520', processName: '末并' }) }
    },
    {
      name: '11530',
      label: '条桶统计',
      roles: ['11530'],
      slots: {
        default: h(BucketStatistics_PreDrawing, { statusCode: '11530', processName: '末并' })
      }
    },
    // {
    //   name: '11540',
    //   label: '异常分析',
    //   roles: ['11540'],
    //   slots: {
    //     default: h(AbnormalAnalysis, { statusCode: '11540', processName: '末并' })
    //   }
    // },
    {
      name: '11570',
      label: '条桶-停车',
      roles: ['11570'],
      slots: {
        default: h(BucketParking, { statusCode: '11570', processName: '末并' })
      }
    },
    {
      name: '11560',
      label: '设置变更',
      roles: ['11560'],
      slots: { default: h(ChangeSettings, { statusCode: '11560', processName: '末并' }) }
    },
    {
      name: '11550',
      label: '历史趋势图',
      roles: ['11550'],
      slots: { default: h(HistoricalTrendChart, { statusCode: '11550', processName: '末并' }) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
